<template>
	<view class="page-index-cantainer full box relative" :style="{'--top-height':topHeight}">
		<view class="top-image">
			<image class="full" src="/static/images/topbg.png" mode="aspectFill"></image>
			<view class="change-store-wrap" v-if="hasLogin">
				<picker :range="storeList" mode="selector" range-key="name" @change="pickerChange">
					<view class="active-store-wrap">
						<view class="current-store-name">
							<text>{{ activeStore.name }}</text>
						</view>
						<image class="change-store-icon" src="/static/images/qiyehuan.png" mode=""></image>
					</view>
				</picker>
			</view>
		</view>
		<view class="content-wrapper" style="z-index: 1;" v-if="hasLogin">
			<scroll-view scroll-y class="full box" @scrolltolower="getOrderList(false)">
				<view v-if="showType == 1">
					<view class="today-order">
						<view>{{todayOrderNum}}</view>
						<view>今日订单</view>
					</view>
					<view class="min-info">
						<view>
							<text>{{completeOrdeNum}}</text>
							<text>已完成</text>
						</view>
						<view>
							<text>{{paySuccessOrderNum}}</text>
							<text>支付成功</text>
						</view>
						<view>
							<text>{{CanceOrderNum}}</text>
							<text>已取消</text>
						</view>
					</view>
					<view class="order" v-if="showType == 1">
						<view class="title">全部订单</view>
						<view class="order-item" v-for="(item,index) in list" :key="item.id">
							<image class="left-image" :src="item.room_image" mode=""></image>
							<view class="right-info">
								<view class="order-title">
									<view>{{item.store_name}}</view>
								</view>
								<view class="time-price">
									<view>开始时间：{{item.start_time}}</view>
								</view>
								<view class="room">茶市：{{item.room_name}}</view>
							</view>
							<view class="item-status">
								<view class="status-value">
									<text>{{item.status_str}}</text>
								</view>
								<view class="price-value">
									<text>¥{{item.price}}</text>
								</view>
							</view>
						</view>
						<view class="empty-wrapper" v-if="isEmpty">
							<u-empty text="暂无订单数据" icon="/static/empty.png" />
						</view>
						<view class="loadmore-wrapper">
							<u-loadmore icon-color="#3c9cff" :status="status" loading-icon="semicircle" />
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 未登录 -->
		<view class="weilogin" v-else>
			<image src="../../static/images/weilogin.png" mode=""></image>
			<view>您暂未登录,请先登录~</view>
			<button style="background-color: #00809F;width: 240rpx;color: #FFF;" @click="goLogin()">登录</button>
		</view>
		<!-- 没有权限 -->
		<view class="weiquanxian" v-if="showType == 2">
			<image src="../../static/images/weilogin.png" mode=""></image>
			<view>不好意思，您暂无权限～</view>
		</view>
	</view>
</template>
<script>
	import { mapState, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				showStroe: false,
				showType: uni.getStorageSync('userinfo').type ? uni.getStorageSync('userinfo').type : '',
				page: 1,
				pageSize: 15,
				isEmpty: false,
				list: [],
				status: 'loadmore',
				last_page: 0,
				// token: uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
				// storeId: uni.getStorageSync('storeList')[0].id ? uni.getStorageSync('storeList')[0].id : '',
				orderList: [],
				// 今日订单
				todayOrderNum: 0,
				// 已取消订单
				CanceOrderNum: 0,
				// 支付成功订单
				paySuccessOrderNum: 0,
				// 已完成订单
				completeOrdeNum: 0,
				// storeList: [
				// 	uni.getStorageSync('storeList')
				// ],
				storeName: '',
				hasInit: false,
			};
		},
		computed: {
			...mapState({ storeList_store: state => state.storeList, }),
			...mapGetters(['activeStore', 'token', 'hasLogin']),
			storeList() {
				const { storeList_store } = this
				console.log(storeList_store, '门店的列表');
				return storeList_store || []
			},
			topHeight() {
				const sys = uni.getSystemInfoSync()
				return sys.statusBarHeight + 'px'
			},
		},
		async onShow() {

			const shouldUpdate = uni.getStorageSync('should_update')
			uni.removeStorageSync('should_update')
			if (!!shouldUpdate) {
				setTimeout(() => {
					this.hasInit = true
					this.showType = uni.getStorageSync('userinfo').type ? uni.getStorageSync('userinfo').type :
						''
					// this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
					const s = uni.getStorageSync('storeList')
					if (s && s.length) {
						const [target] = s
						if (target) {
							this.storeId = target.id
						}
					}
					// 管理员权限
					if (this.showType == 1) {
						// 获取订单列表
						this.getOrderList();
						// 初始化订单数量
						this.getOrderInit();
						// 获取登录成功后的商铺name
					}
					// if (uni.getStorageSync('storeList')[0].name != '') {
					// 	this.storeName = uni.getStorageSync('storeList')[0].name
					// }
				}, 1000)
			} else {
				if (this.hasInit && this.hasLogin) {
					uni.showLoading({
						title: '正在获取数据',
						mask: true
					})
					await this.$delay(350)
					this.getOrderList(true);
					this.getOrderInit();
					uni.hideLoading()
				}
			}
		},
		onLoad() {
			this.showType = uni.getStorageSync('userinfo').type ? uni.getStorageSync('userinfo').type : ''
			// this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
			const s = uni.getStorageSync('storeList')
			if (s && s.length) {
				const [target] = s
				if (target) {
					this.storeId = target.id
				}
			}
			// this.storeId = uni.getStorageSync('storeList')[0].id ? uni.getStorageSync('storeList')[0].id : ''
			// 管理员权限
			if (this.showType == 1) {
				// 获取订单列表
				this.getOrderList();
				// 初始化订单数量
				this.getOrderInit();
				// 获取登录成功后的商铺name
			}
			if (this.hasLogin) {
				this.hasInit = true
			}
			console.log(this.hasInit, 'hasInit');
			// if (uni.getStorageSync('storeList')[0].name != '') {
			// 	this.storeName = uni.getStorageSync('storeList')[0].name
			// }
		},

		// onReachBottom() {
		// 	this.status = 'noMore';
		// 	if (this.page < this.last_page) {
		// 		this.status = 'more';
		// 		this.page += 1;
		// 		this.getOrderList();
		// 	}
		// },
		methods: {
			showPicker() {
				const { storeList_store } = this
				if (!storeList_store.length) {
					return this.$toast({ title: "暂无门店信息" })
				}
				this.showStroe = true
			},
			pickerChange(ev) {
				const index = ev.detail.value * 1
				const targetStore = this.storeList[index]
				if (!targetStore) return
				const { id } = targetStore
				const { activeStore } = this
				// if (activeStore.id !== -1 && activeStore.id === id) return
				uni.setStorageSync('storeListId', id)
				this.$store.commit('setActiveId', id)
				this.getOrderList(true);
				this.getOrderInit();
			},
			selectItem(e) {
				// this.storeId = e.value[0].id
				const [targetStore] = e.value
				const { id } = targetStore
				uni.setStorageSync('storeListId', id)
				this.$store.commit('setActiveId', id)
				this.showStroe = false;
				this.page = 1;
				this.getOrderList();
				// 初始化订单数量
				this.getOrderInit();
			},
			goLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			// 让loading多转一会
			delay(time = 300) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			},
			getOrderList(clear = false) {
				const { activeStore } = this
				if (activeStore.id === -1) return
				if (clear) {
					this.page = 1
					this.isEmpty = false
					this.list = []
					this.status = 'loadMore'
				}
				if (this.status === 'noMore' || this.status === 'loading') return
				this.status = 'loading'
				this.https('/order/orderList', {
					page: this.page,
					store_id: activeStore.id
				}).then(async res => {
					console.log(res, 'resp[]');
					const { code, data } = res
					await this.$delay(clear ? 200 : 320)
					if (code !== 1) {
						this.isEmpty = this.list.length === 0
						return this.status = 'noMore'
					}
					const { data: list, total, per_page, current_page } = data
					const hasMore = current_page * per_page < total
					if (!!list && list.length) this.list.push(...list)
					this.isEmpty = this.list.length === 0
					if (!hasMore) return this.status = 'noMore'
					this.page += 1
					this.status = 'loadmore'
					// this.last_page = res.data.last_page
					// if (this.page == 1) {
					// 	this.orderList = res.data.data
					// } else {
					// 	this.orderList = orderList.concat(res.data.data)
					// }
				})
			},
			getOrderInit() {
				// 获取今日订单
				this.getTodayOrderNum();
				// 获取已取消订单
				this.getCanceOrderNum();
				// 获取支付成功订单
				this.getPaySuccessOrderNum();
				// 获取已完成订单
				this.getCompleteOrdeNum();
			},
			// 今日订单
			getTodayOrderNum() {
				const { activeStore } = this
				if (activeStore.id === -1) return
				this.https('/order/todayOrder', {
					store_id: activeStore.id
				}).then(res => {
					this.todayOrderNum = res.data
				})
			},
			// 已取消订单
			getCanceOrderNum() {
				const { activeStore } = this
				if (activeStore.id === -1) return
				this.https('/order/cancelOrder', {
					store_id: activeStore.id
				}).then(res => {
					this.CanceOrderNum = res.data
				})
			},
			// 支付成功订单
			getPaySuccessOrderNum() {
				const { activeStore } = this
				if (activeStore.id === -1) return
				this.https('/order/payOrder', {
					store_id: activeStore.id
				}).then(res => {
					console.log(res);
					this.paySuccessOrderNum = res.data
				})
			},
			// 支付已完成订单
			getCompleteOrdeNum() {
				const { activeStore } = this
				if (activeStore.id === -1) return
				this.https('/order/completeOrder', {
					store_id: activeStore.id
				}).then(res => {
					this.completeOrdeNum = res.data
				})
			}
		}
	};
</script>
<style lang="scss">
	.weilogin {
		width: 474rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 50%;
		top: 66%;
		transform: translate(-50%, -50%);

		image {
			width: 474rpx;
			height: 474rpx;
		}

		view {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin: 40rpx 0;
		}
	}

	.weiquanxian {
		width: 474rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 50%;
		top: 66%;
		transform: translate(-50%, -50%);

		image {
			width: 474rpx;
			height: 474rpx;
		}

		view {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin: 40rpx 0;
		}
	}

	page {
		background-color: #F0F2F5;
	}

	.page-index-cantainer {

		.content-wrapper {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: calc(var(--top-height) + 140rpx);
			box-sizing: border-box;
		}

		.change-store-wrap {
			position: absolute;
			top: calc(var(--top-height) + 8rpx);
			left: 24rpx;


			.active-store-wrap {
				display: flex;
				align-items: center;
				color: #fff;
				border-radius: 32rpx;
				box-sizing: border-box;
				border: 1px solid #fff;
				height: 88rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 12rpx 24rpx;
				box-sizing: border-box;
				max-width: 520rpx;

				.current-store-name {
					flex: 1;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 34rpx;
				}

				.change-store-icon {
					width: 34rpx;
					height: 34rpx;
					margin-left: 24rpx;
					flex-shrink: 0;
				}
			}
		}
	}

	.top-image {
		width: 750rpx;
		height: 504rpx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
	}

	.top-left {
		// position: absolute;
		// top: 90rpx;
		// left: 40rpx;
		// height: 64rpx;
		// border-radius: 24rpx;
		// border: 2rpx solid #FFFFFF;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		// padding: 0 20rpx;
		// color: #FFFFFF;

	}

	.top-left view {
		overflow: hidden;
		text-overflow: ellipsis;
		height: 50rpx;
		margin-right: 20rpx;
		min-width: 150rpx;
	}

	.top-left image {
		width: 32rpx;
		height: 32rpx;
	}

	.today-order {
		display: flex;
		flex-direction: column;
		width: 200rpx;
		height: 150rpx;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		margin-bottom: 32rpx;
	}

	.today-order view:nth-child(1) {
		font-size: 80rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FFF;
	}

	.today-order view:nth-child(2) {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.min-info {
		width: 670rpx;
		height: 200rpx;
		background-color: #FFF;
		box-shadow: 0px 0px 12rpx 0px rgba(189, 189, 189, 0.5);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0 auto;
	}

	.min-info view {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 150rpx;
	}

	.min-info view text:nth-child(1) {
		font-size: 60rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
	}

	.min-info view text:nth-child(2) {
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #999999;
		text-align: center;
	}

	.order {
		width: 670rpx;
		padding-bottom: 40rpx;
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.order .title {
		font-weight: bold;
		color: #000000;
		margin-bottom: 52rpx;
	}

	.order-item {
		width: 670rpx;
		// height: 200rpx;
		box-shadow: 0px 0px 12rpx 0rpx rgba(189, 189, 189, 0.5);
		border-radius: 20rpx;
		background-color: #FFF;
		display: flex;
		align-items: center;
		// justify-content: space-around;
		margin-bottom: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;

		// .order-title,
		// .time-price {
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-between;
		// }
		.order-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.item-status {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			font-size: 28rpx;

			.price-value {
				font-weight: bold;
				margin-top: 6rpx;
			}

			.status-value {
				color: #00809F;
			}
		}


		.time-price {
			font-size: 24rpx;
			font-weight: bold;
			color: #999999;
			margin-top: 8rpx;

			view:nth-child(2) {
				color: #000;
				font-size: 28rpx;
			}
		}

		.room {
			font-size: 24rpx;
			font-weight: bold;
			color: #999999;
			margin-top: 8rpx;
		}

		// .order-title {
		// 	view:nth-child(1) {
		// 		width: 280rpx;
		// 		height: 44rpx;
		// 		font-size: 32rpx;
		// 		font-family: PingFangSC-Medium, PingFang SC;
		// 		font-weight: 700;
		// 		color: #000000;
		// 	}

		// 	view:nth-child(2) {
		// 		color: #00809F;
		// 		font-size: 28rpx;
		// 	}
		// }
	}

	.right-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 450rpx;
	}

	.order-item .left-image {
		width: 160rpx;
		height: 160rpx;
	}
</style>